import { defineComponent, ref, onMounted } from 'vue';
import { DelCookieTOOL, FixEmptyTOOL, GetCookieTOOL } from '@utils/index';
import { GetAdminQulificationCustomAPI, PostAdminQulificationCustomAPI } from '@service/api/AdminAPI';
import { ElMessage } from 'element-plus';
import './style.scss';

export default defineComponent({
  name: 'Admin',
  setup() {
    const map = [
      {
        label: '独角兽（培育）企业',
        key: 'djs',
      },
      {
        label: '瞪羚企业',
        key: 'dl',
      },
      {
        label: '国家级专精特新小巨人企业',
        key: 'zjtxjr_gjj',
      },
      {
        label: '省级（含）及以上专精特新小巨人企业',
        key: 'zjtxjr_sj',
      },
      {
        label: '高新技术企业',
        key: 'gx',
      },
      {
        label: '科技型中小企业',
        key: 'kjxzx',
      },
      {
        label: '规上企业',
        key: 'gs',
      },
      {
        label: '科创企业',
        key: 'kc',
      },
    ];
    const table1: any = ref([]);
    const table2: any = ref([]);
    const userName: any = ref('');
    const updateTime = ref('');
    const dialogVisible = ref(false);

    const openDialog = () => {
      dialogVisible.value = true;
    };

    const handleSave = async () => {
      let rt;
      try {
        rt = await PostAdminQulificationCustomAPI([...table1.value, ...table2.value]);
      } finally {
        if (rt === 1) {
          ElMessage({
            type: 'success',
            message: '保存成功',
            duration: 3000,
            customClass: 'errorLog',
            center: true,
          });
        }
      }

      dialogVisible.value = false;
    };

    const logout = () => {
      DelCookieTOOL('userAdmin');
      DelCookieTOOL('adminName');
      window.location.reload();
    };

    const handleCancel = () => {
      dialogVisible.value = false;
    };

    const init = async () => {
      const rt = await GetAdminQulificationCustomAPI();
      userName.value = GetCookieTOOL('adminName');
      table1.value = map.map((item: any) => {
        const value = rt.find((l) => item.key === l.key);
        return {
          ...value,
          name: item.label,
        };
      });
      table2.value = [
        {
          label: '产学研载体',
          key: 'cxy',
        },
      ].map((item: any) => {
        const value = rt.find((l) => item.key === l.key);
        updateTime.value = value.update_time;
        return {
          ...value,
          name: item.label,
        };
      });
    };

    onMounted(() => {
      init();
    });

    return {
      userName,
      updateTime,
      table1,
      table2,
      dialogVisible,
      handleSave,
      logout,
      openDialog,
      handleCancel,
    };
  },
  render() {
    return (
      <div id="Admin">
        <header>
          <aside>
            <img src={require('@assets/logo.png')} />
            <span>后台管理</span>
          </aside>
          <aside>
            <p>
              <img src={require('@assets/icon_user.png')} />
              <span>{FixEmptyTOOL(this.userName)}</span>
            </p>
            <p onClick={this.logout}>
              <img src={require('@assets/icon_quit.png')} />
              <span>退出</span>
            </p>
          </aside>
        </header>
        <div class="Admin">
          <el-scrollbar height="100%">
            <main class="admin_body">
              <header>
                <aside>
                  <p>数据录入</p>
                </aside>
                <aside>
                  <label>更新时间：{FixEmptyTOOL(this.updateTime)}</label>
                  <label class="save_button" onClick={this.openDialog}>
                    保存
                  </label>
                </aside>
              </header>
              <main>
                <el-table
                  data={this.table1}
                  style="width: 100%"
                  border={true}
                  highlight-current-row={false}
                  row-class-name="admin_table_row"
                  header-row-class-name="admin_table_header"
                >
                  <el-table-column label="序号" type="index" width="50" align="center" />
                  <el-table-column label="企业资质" prop="name" align="center" width="227"></el-table-column>
                  <el-table-column label="合作情况" align="center">
                    <el-table-column prop="cooperation_customer_cnt" label="客户数" align="center">
                      {{
                        default: ({ row }: any) => {
                          return (
                            <el-input
                              size="small"
                              placeholder="请输入"
                              modelValue={row.cooperation_customer_cnt}
                              onInput={(e) => {
                                row.cooperation_customer_cnt = e.replace(/[^\d/]+/g, '').replace(/^[0]+/g, '');
                              }}
                            />
                          );
                        },
                      }}
                    </el-table-column>
                    <el-table-column prop="cooperation_open_account" label="开户合作率（%）" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.cooperation_open_account}
                            onInput={(e) => {
                              row.cooperation_open_account = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                    <el-table-column prop="cooperation_credit" label="信贷合作率（%）" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.cooperation_credit}
                            onInput={(e) => {
                              row.cooperation_credit = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                  </el-table-column>
                  <el-table-column label="公私联动" align="center">
                    <el-table-column prop="linkage_customer_cnt" label="代发工资户数" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.linkage_customer_cnt}
                            onInput={(e) => {
                              row.linkage_customer_cnt = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                    <el-table-column prop="linkage_money" label="代发工资金额（亿美元）" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.linkage_money}
                            onInput={(e) => {
                              row.linkage_money = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                    <el-table-column prop="linkage_cooperation" label="私行合作" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.linkage_cooperation}
                            onInput={(e) => {
                              row.linkage_cooperation = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                  </el-table-column>
                  <el-table-column label="跨境金融" align="center">
                    <el-table-column prop="border_settlement" label="国际结算量（亿美元）" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.border_settlement}
                            onInput={(e) => {
                              row.border_settlement = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                    <el-table-column prop="border_sale" label="结售汇量（亿美元）" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.border_sale}
                            onInput={(e) => {
                              row.border_sale = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                  </el-table-column>
                  <el-table-column label="投贷联动" align="center">
                    <el-table-column prop="investment_loan_customer_cnt" label="户数" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.investment_loan_customer_cnt}
                            onInput={(e) => {
                              row.investment_loan_customer_cnt = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                    <el-table-column prop="investment_loan_money" label="金额（亿元）" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.investment_loan_money}
                            onInput={(e) => {
                              row.investment_loan_money = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                  </el-table-column>
                </el-table>

                <el-table
                  data={this.table2}
                  style="width: 100%"
                  border={true}
                  row-class-name="admin_table_row"
                  header-row-class-name="admin_table_header"
                >
                  <el-table-column label="序号" type="index" width="50" align="center" />
                  <el-table-column label="企业资质" prop="name" align="center" width="227" />
                  <el-table-column label="合作情况" align="center">
                    <el-table-column prop="iur_carrier_cnt" label="载体数" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.iur_carrier_cnt}
                            onInput={(e) => {
                              row.iur_carrier_cnt = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                    <el-table-column prop="iur_cooperation_cnt" label="建立合作数" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.iur_cooperation_cnt}
                            onInput={(e) => {
                              row.iur_cooperation_cnt = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                    <el-table-column prop="iur_cooperation_proportion" label="合作率（%）" align="center">
                      {{
                        default: ({ row }: any) => (
                          <el-input
                            size="small"
                            placeholder="请输入"
                            modelValue={row.iur_cooperation_proportion}
                            onInput={(e) => {
                              row.iur_cooperation_proportion = e
                                .replace(/[^\d^./]+/g, '')
                                .replace('.', '$#$')
                                .replace(/\./g, '')
                                .replace(/\//g, '')
                                .replace('$#$', '.');
                            }}
                          />
                        ),
                      }}
                    </el-table-column>
                  </el-table-column>
                </el-table>
              </main>
            </main>
          </el-scrollbar>
        </div>
        <el-dialog
          modelValue={this.dialogVisible}
          width="433px"
          show-close={false}
          custom-class="admin_dialog"
          close-on-click-modal={false}
          close-on-press-escape={false}
        >
          {{
            title: () => <div class="admin_dialog--title">您是否确认保存当前内容？</div>,
            default: () => (
              <div class="admin_dialog--main">
                若您选择取消，则大屏数据不会更新；
                <br />
                若您想还原为上次保存的数据，请重新加载页面。
              </div>
            ),
            footer: () => (
              <div class="admin_dialog--footer">
                <div class="dialog_cancel" onClick={this.handleCancel}>
                  取消
                </div>
                <div class="dialog_confirm" onClick={this.handleSave}>
                  确定
                </div>
              </div>
            ),
          }}
        </el-dialog>
      </div>
    );
  },
});
